import { useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';

export default function AreaStackGradient(){
  let [key, setKey] = useState(0);

  useEffect(()=>{
    // echart使用步骤
    // 1. 初始化实例
    let myChart = echarts.init(document.querySelector('#container') as HTMLElement);
    // 2. 配置echart参数
    const options =  {
      color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
      title: {
          text: '渐变堆叠面积图'
      },
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              label: {
                  backgroundColor: '#6a7985'
              }
          }
      },
      legend: {
          data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
      },
      toolbox: {
          feature: {
              saveAsImage: {}
          }
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      xAxis: [
          {
              type: 'category',
              boundaryGap: false,
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
      ],
      yAxis: [
          {
              type: 'value'
          }
      ],
      series: [
          {
              name: 'Line 1',
              type: 'line',
              stack: '总量',
              smooth: true,
              lineStyle: {
                  width: 0
              },
              showSymbol: false,
              areaStyle: {
                  opacity: 0.8,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(128, 255, 165)'
                  }, {
                      offset: 1,
                      color: 'rgba(1, 191, 236)'
                  }])
              },
              emphasis: {
                  focus: 'series'
              },
              data: [140, 232, 101, 264, 90, 340, 250]
          },
          {
              name: 'Line 2',
              type: 'line',
              stack: '总量',
              smooth: true,
              lineStyle: {
                  width: 0
              },
              showSymbol: false,
              areaStyle: {
                  opacity: 0.8,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(0, 221, 255)'
                  }, {
                      offset: 1,
                      color: 'rgba(77, 119, 255)'
                  }])
              },
              emphasis: {
                  focus: 'series'
              },
              data: [120, 282, 111, 234, 220, 340, 310]
          },
          {
              name: 'Line 3',
              type: 'line',
              stack: '总量',
              smooth: true,
              lineStyle: {
                  width: 0
              },
              showSymbol: false,
              areaStyle: {
                  opacity: 0.8,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(55, 162, 255)'
                  }, {
                      offset: 1,
                      color: 'rgba(116, 21, 219)'
                  }])
              },
              emphasis: {
                  focus: 'series'
              },
              data: [320, 132, 201, 334, 190, 130, 220]
          },
          {
              name: 'Line 4',
              type: 'line',
              stack: '总量',
              smooth: true,
              lineStyle: {
                  width: 0
              },
              showSymbol: false,
              areaStyle: {
                  opacity: 0.8,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(255, 0, 135)'
                  }, {
                      offset: 1,
                      color: 'rgba(135, 0, 157)'
                  }])
              },
              emphasis: {
                  focus: 'series'
              },
              data: [220, 402, 231, 134, 190, 230, 120]
          },
          {
              name: 'Line 5',
              type: 'line',
              stack: '总量',
              smooth: true,
              lineStyle: {
                  width: 0
              },
              showSymbol: false,
              label: {
                  show: true,
                  position: 'top'
              },
              areaStyle: {
                  opacity: 0.8,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(255, 191, 0)'
                  }, {
                      offset: 1,
                      color: 'rgba(224, 62, 76)'
                  }])
              },
              emphasis: {
                  focus: 'series'
              },
              data: [220, 302, 181, 234, 210, 290, 150]
          }
      ]
    };
    // 3. 调用setOption修改echart
    myChart.setOption(options);
  }, []);

  return <div key={key} id="container" style={{width: '100%', height: '100%'}}>area stack gradient</div>
}
